<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <script src="../layui/layui.all.js"></script>
    <script src="../jquery/jquery-3.4.1.js"></script>

    <style>
        /*下拉列表默认显示*/
        .layui-form-select dl { max-height:190px; }
    </style>
</head>
<body>
<div class="layui-container">
    <form class="layui-form" action="javascript:void(0);" enctype="" method="post">
        <!--<%&#45;&#45;<input type="text" name="userName" value="${user.userName}">&#45;&#45;%>-->

        <div class="layui-form-item">
            <label class="layui-form-label">帖子标题</label>
            <div class="layui-input-block">
                <input type="text" name="postName" lay-verify="title" autocomplete="off" placeholder="请输入帖子的标题" class="layui-input" id="postName">
            </div>
        </div>
        <div class="layui-form-item" style="height: 220px">
            <label class="layui-form-label">帖子类型</label>
            <div class="layui-input-block">
                <select name="city" lay-verify="required" lay-filter="type" id="category" name="category">
                    <!--<option value=""></option>-->
                    <!--<%&#45;&#45;<option value="0">北京</option>&#45;&#45;%>-->
                    <!--<%&#45;&#45;<option value="1">上海</option>&#45;&#45;%>-->
                    <!--<%&#45;&#45;<option value="2">广州</option>&#45;&#45;%>-->
                    <!--<%&#45;&#45;<option value="3">深圳</option>&#45;&#45;%>-->
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">封面图</label>
            <div class="layui-input-block">
                <input type="file" name="photo"  id="photo" value="请选择上传的文件"/>
            </div>
        </div>

        <!--<%&#45;&#45;<div class="layui-form-item layui-form-text">&#45;&#45;%>-->
        <!--<%&#45;&#45;<label class="layui-form-label">帖子内容</label>&#45;&#45;%>-->
        <!--<%&#45;&#45;<div class="layui-input-block">&#45;&#45;%>-->
            <!--<%&#45;&#45;<textarea placeholder="请输入内容" class="layui-textarea" style="width: 90%;height: 500px" name="postContent" id="postContent"></textarea>&#45;&#45;%>-->
            <!--<%&#45;&#45;</div>&#45;&#45;%>-->
        <!--<%&#45;&#45;</div>&#45;&#45;%>-->
        <!--<%&#45;&#45;<div style="line-height: 500px"></div>&#45;&#45;%>-->
        <div id="div1">
            <p>请书写帖子具体内容</p>
            <!--<%&#45;&#45;<p>欢迎使用 wangEditor 富文本编辑器</p>&#45;&#45;%>-->
        </div>

        <textarea id="text1" style="width:100%; height:100%;display: none;" ></textarea>

        <!--<%&#45;&#45;<button id="btn1">获取html</button>&#45;&#45;%>-->
        <!--<%&#45;&#45;<button id="btn2">获取text</button>&#45;&#45;%>-->


        <script>
            $.ajax({
                url:"/forum/post/selectAllBrandName",
                success:function (data) {
                    var html = "<option value=\"0\"></option>";
                    for (var i = 0; i < data.length; i++){
                        html = html + "<option value=\"" + data[i].brandName + "\">";
                        html = html + data[i].brandName + "</option>";
                    }
                    console.log(html);
                    $('#category').html(html)

                    // 解决外部的jquery 和 layui 自带的jquery冲突无法展示下拉列表
                    // 重新渲染一下select列表框
                    layui.use('form', function(){
                        var form = layui.form;
                        form.render('select');
                    });
                }

            })
        </script>
        <script>

            layui.use('form', function(){
                var form = layui.form;
                form.render();
            });


            // layui.on('select(type)',function (data) {
            //     category = data.value;
            //     type = data.elem[data.elem.selectedIndex].text;
            //     console.log(type)
            //     form.render('select')
            // })
        </script>
        <script type="text/javascript" src="wangEditor.js"></script>
        <script type="text/javascript">
            var E = window.wangEditor
            var editor = new E('#div1')
            var $text1 = $('#text1')
            editor.customConfig.onchange = function (html) {
                // 监控变化，同步更新到 textarea
                $text1.val(html)
            }
            //开启debug模式
            editor.customConfig.debug = true;
            // 关闭粘贴内容中的样式
            editor.customConfig.pasteFilterStyle = false
            // 忽略粘贴内容中的图片
            editor.customConfig.pasteIgnoreImg = true
            // 上传图片到服务器
            editor.customConfig.uploadFileName = 'photo'; //设置文件上传的参数名称
            editor.customConfig.uploadImgServer = '/forum/post/upload'; //设置上传文件的服务器路径
            editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 将图片大小限制为 3M
            //自定义上传图片事件
            editor.customConfig.uploadImgHooks = {
                before : function(xhr, editor, files) {

                },
                success : function(xhr, editor, result) {
                    console.log("上传成功");
                },
                fail : function(xhr, editor, result) {
                    console.log("上传失败,原因是"+result);
                },
                error : function(xhr, editor) {
                    console.log("上传出错");
                },
                timeout : function(xhr, editor) {
                    console.log("上传超时");
                }
            }


            editor.create()
            let eds = document.getElementsByClassName('w-e-text-container')
            eds[0].style = eds[0].style.cssText + 'height: 700px'
            $text1.val(editor.txt.html())

            // document.getElementById('btn1').addEventListener('click', function () {
            //     // 读取 html
            //     alert(editor.txt.html())
            // }, false)

            // document.getElementById('btn2').addEventListener('click', function () {
            //     // 读取 text
            //     alert(editor.txt.text())
            // }, false)
        </script>



        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="" onclick="submitInfo()">立即提交</button>
                <%--<button type="reset" class="layui-btn layui-btn-primary">重置</button>--%>
            </div>
        </div>
    </form>
</div>

<script>
    function submitInfo() {
        var postName = $('#postName').val()
        if (postName == null){
            alert("帖子标题不能为空")
            return false;
        }
        // 获取选择框选中的内容
        var tag = $('#category option:selected').val();
        if (tag == 0){
            alert("帖子类型不能为空")
            return false
        }
        alert(tag)
        // 获取富文本编辑器中的文本内容
        var txt = editor.txt.text()
        // 判断内容是否超过100字符，超过截取到100，不超过就显示所有文本信息
        if (txt.length == 0){
            alert("帖子详情不能为空");
            return false;
        } else {
            if (txt.length > 100){
                // 截取其中的部分内容
                var txt = txt.substr(0,100);
                console.log(txt);
            }else {
                var txt = txt;
            }
        }
        // 获取用户的信息
        $.ajax({
            url: '/forum/user/getUserInfo',
            type:'get',
            dataType:'json',
            success: function (data) {
                if( data.state === '200' ){
                    console.log(data.data);
                    console.log(data.data.userName);

                    var userName = data.data.userName;

                    var formData = new FormData();
                    formData.append("photo", $('input[type="file"]')[0].files[0])
                    // formData.append("photo", $('input[type="file"]')[1].files[0])
                    var val = postName
                    formData.append("postName", val)
                    var val = tag
                    formData.append("postType", val)
                    // 获取富文本编辑器中的html代码
                    var val = editor.txt.html()
                    alert(editor.txt.html())
                    formData.append("postContent",val)
                    var val = userName
                    formData.append("userName",val)
                    var val = txt;
                    formData.append("other1",val)
                    // var val = $('#photo')

                    $.ajax(
                        {
                            url:"/forum/post/insertPostTest",
                            type:"post",
                            contentType:false,  // 告诉jquery不要设置Content-Type请求头
                            data:formData,
                            async:true,
                            processData: false,// 告诉jquery不要处理发送的数据
                            success:function (data) {
                                // alert(data)
                                if("success"== data){
                                    alert("添加成功")
                                    location.replace(location.href);
                                }
                            }
                        })
                }
            }
        })


    }
</script>
</body>
</html>